<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="cellular_types.html">
<link rel="import" href="subflow_behavior.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/cellular_utils.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_listener_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_card_radio_button.html">

<dom-module id="setup-selection-flow">
  <template>
    <style include="iron-flex">
      :host {
        --cr-card-radio-button-width: 224px
      }

      @media (min-width: 640px){
        /* At above 640px card radio buttons should be aligned in a row  */
        #setupFlowSelectRadio {
          flex-direction: row;
        }

        .sim-icon-container {
          height: 128px;
        }

        .sim-flow-ui-btn {
         margin-bottom: 32px;
        }
      }

      @media (max-width: 640px){
        /* At below 640px card radio buttons should be aligned in a column  */
        #setupFlowSelectRadio {
          flex-direction: column;
        }

        .sim-flow-ui-btn {
          margin-inline-end: 0;
          margin-inline-start: 0;
          width: 278px;
        }

        #psimFlowUiBtn {
          margin-bottom: 8px;
          margin-top: 16px;
        }

        #esimFlowUiBtn {
          margin-bottom: 32px;
          margin-top: 8px;
        }

        .flex-container {
          display: flex;
          flex-direction: row;
        }

        .sim-icon-container {
          height: 64px;
          margin: auto;
          width: 128px;
        }
      }

      #setupFlowSelectRadio {
        display: flex;
        justify-content: center;
      }

      .sim-icon-container {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      #psimIconContainer {
        background-image: -webkit-image-set(
            url(chrome://resources/cr_components/chromeos/cellular_setup/psim_1x.png) 1x,
            url(chrome://resources/cr_components/chromeos/cellular_setup/psim_2x.png) 2x);
      }

      #esimIconContainer {
        background-image: -webkit-image-set(
            url(chrome://resources/cr_components/chromeos/cellular_setup/esim_1x.png) 1x,
            url(chrome://resources/cr_components/chromeos/cellular_setup/esim_2x.png) 2x);
      }

      .sim-btn-text {
        text-align: center;
      }
      .sim-btn-title {
        font-weight: 600;  /* semibold */
        margin-top: 16px;
      }

      .sim-btn-description {
        margin-top: 8px;
      }

    </style>
    <cr-radio-group
        name="setup-flow-selection"
        id="setupFlowSelectRadio"
        selected="{{setupFlowSelection_}}"
        on-selected-changed="onSetupFlowRadioSelectedChange_">
      <cr-card-radio-button
          id="psimFlowUiBtn"
          name="psim-flow-ui"
          class="sim-flow-ui-btn"
          aria-labeledby="psimBtnTitle"
          aria-describedby="psimBtnDescritpion">
        <div class="flex-container">
          <div id="psimIconContainer" class="sim-icon-container"></div>
          <div>
            <div id="psimBtnTitle"
                class="sim-btn-title sim-btn-text"
                aria-hidden="true">
              [[i18n('pSimFlowSetup')]]
            </div>
            <div id="psimBtnDescritpion"
                class="sim-btn-description sim-btn-text"
                aria-hidden="true">
              [[i18n('pSimFlowSetupMessage')]]
            </div>
          </div>
        </div>
      </cr-card-radio-button>
      <cr-card-radio-button
          id="esimFlowUiBtn"
          class="sim-flow-ui-btn"
          name="esim-flow-ui"
          aria-labeledby="esimBtnTitle"
          aria-describedby="esimBtnDescrition"
          disabled="[[!isConnectedToNonCellularNetwork_]]">
        <div class="flex-container">
          <div id="esimIconContainer" class="sim-icon-container"></div>
          <div>
            <div id="esimBtnTitle"
                class="sim-btn-title sim-btn-text"
                aria-hidden="true">
              [[i18n('eSimFlowSetup')]]
            </div>
            <div id="esimBtnDescrition"
                class="sim-btn-description sim-btn-text"
                aria-hidden="true">
              [[i18n('eSimFlowSetupMessage')]]
            </div>
          </div>
        </div>
      </cr-card-radio-button>
    </cr-radio-group>
  </template>
  <script src="setup_selection_flow.js"></script>
</dom-module>